<!--
* 严肃声明：
* 开源版本请务必保留此注释头信息，若删除gemframe官方保留所有法律责任追究！
* 本软件受国家版权局知识产权以及国家计算机软件著作权保护（登记号：2018SR503328）
* 不得恶意分享产品源代码、二次转售等，违者必究。
* Copyright (c) 2020 gemframework all rights reserved.
* http://www.gemframework.com
* 版权所有，侵权必究！
*/
-->
<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <div th:replace="common/links::common_links"></div>
    <div th:replace="common/links::font_links"></div>
    <div th:replace="common/links::ztree_links"></div>
    <div th:replace="common/links::table_list_links"></div>
    <style>
        .notice_nav a:nth-child(3){border-top-right-radius: 0;border-bottom-right-radius:0}
        .notice_nav a:nth-child(4){border-top-right-radius: 4px;border-bottom-right-radius: 4px}
        th{text-align: center !important;height: 34px;color: #FFF }
        .dropdown-menu {
            min-width: 250px !important;
            margin-top: 4px;
            font-size: 12px;
        }
    </style>
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 550px;overflow: auto">
<div class="news_main">
<!--    <div id="dept_tree" class="l_left news_left" style="display: none">-->
<!--        <h6>部门目录</h6>-->
<!--        <div class="tree_left_top" style="height: 90%;overflow: auto">-->
<!--            <div class=" order_ztree l_left organize_ztree" style="width: 100%">-->
<!--                <p><ul id="leftTree" class="ztree"  style=" overflow:auto;margin-left: 20px"></ul></p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
    <div id="dept_user" class="l_left news_right">
        <div class="notice_main">
            <div class="notice_check">
                <div class="btn-group l_left"  style="margin-right: 4px">
<!--                    <button type="button" class="btn btn-default" onclick="switchView('dept>user')">按部门查询</button>-->
<!--                    <button type="button" class="btn btn-default">按角色查询</button>-->
                    <button type="button" class="btn btn-default change" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"  style="height: 30px;line-height: 30px;padding: 0 12px !important;font-size: 12px">选择条件</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="height: 30px;line-height: 30px">
                        <span class="caret"></span>
                        <span class="sr-only"></span>
                    </button>
                    <ul style="min-width: 245px;!important;" class="dropdown-menu">
                        <li data-name="username">用户名</li>
                        <li data-name="phone">手机号</li>
                        <li data-name="email">电子邮箱</li>
                    </ul>
                </div>
                <div class="l_left">
                    <input type="text" class="find_input" id="search-keyword" name="username">
                </div>
                <button class="check_btn" onclick="searchData()">查询</button>
                <div class="notice_nav r_right">
                    <a class="btn btn-default" onclick="addView()"><span class="glyphicon glyphicon-plus"></span>新增</a>
                    <a class="btn btn-default" onclick="editView()"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
                    <a class="btn btn-default" onclick="deleteBatch()"><span class="glyphicon glyphicon-remove"></span>删除</a>
                    <a class="btn btn-default" onclick="resetPassword()"><span class="glyphicon glyphicon-tag"></span>重置密码</a>
                </div>
                <div class="clear"></div>
            </div>
            <table id="table" class="table_style" style="margin: 0 auto" > </table>
        </div>
    </div>
    <div class="clear"></div>

</div>
<div th:replace="common/links::common_script"></div>
<div th:replace="common/links::ztree_script"></div>
<div th:replace="common/links::table_script"></div>

<script type="text/javascript" th:src="@{/static/js/custom/ztree.js}"></script>
<script type="text/javascript" th:src="@{/static/js/custom/depttree.js}"></script>
<script  th:inline="javascript">
    let runtime  = [[${session.session_runtime}]]

    $(function(){
        buildTable();
        changeSearchParam();
        $("#dept_user").removeClass("l_left news_right")
    });

    function buildTable() {
        $('#table').bootstrapTable({
            url: "pageByParams",
            method: "get",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            paginationPreText:"上一页",
            paginationNextText:"下一页",
            sortable: true,                     //是否启用排序
            sortName:"id",
            sortOrder: "desc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                        //每页的记录行数（*）
            pageList: [10, 20, 50, 100,"All"],        //可供选择的每页的行数（*）
            smartDisplay:false,
            clickToSelect: true,                //是否启用点击选中行
            height: 30,                         //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            queryParams: function (params) {
                var searchKey = $("#search-keyword").attr("name");
                var searchVal = $("#search-keyword").val();
                var queryParas = {
                    page: params.offset / params.limit,  //页码
                    size: params.limit,   //页面大小
                    sort: params.sort+","+params.order,   //页面大小
                }
                if(searchVal != ""){
                    queryParas[searchKey] = searchVal;
                }
                return queryParas;
            },
            responseHandler: function (res) {
                //这里注意，这里是后台接口返回的数据，需要把返回的数据分别对接rows和total 用于分页和展示
                return {
                    "rows": res.data,
                    "total": res.count==null?0:res.count
                };
            },
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '用户名',
                    field: 'username',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '工号',
                    field: 'worknum',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '员工姓名',
                    field: 'realname',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '手机号',
                    field: 'phone',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '电子邮箱',
                    field: 'email',
                    align: 'center',
                    valign: 'middle'
                },
                 {
                    field: 'operate',
                    title: '操作',
                    width: 220,
                    align: 'center',
                    events: "operateEvents",
                    formatter: operateFormatter
                }
            ],
            onLoadSuccess: function () {
            },
            onLoadError: function () {
                layer.alert("数据加载失败！");
            },
            onDblClickRow: function (row, $element) {
                var id = row.id;
                editView(id);
            },
        });
    }

    function operateFormatter(value, row, index) {
        return [
            '<button type="button" id="btn_detail" class="btn btn-default btn-xs" style="margin-right: 5px;">详情</button>',
            '<button type="button" id="btn_edit" class="btn btn-primary btn-xs" style="margin-right: 5px;">编辑</button>',
            '<button type="button" id="btn_del" class="btn btn-danger btn-xs" style="margin-right: 5px;">删除</button>'
        ].join('');

    }
    window.operateEvents = {
        'click #btn_detail': function (e, value, row, index) {
            layer.alert("您选中了用户:"+JSON.stringify(row));
        },
        'click #btn_edit': function (e, value, row, index) {
            editView(row.id);
        },
        'click #btn_del': function (e, value, row, index) {
            deleteData(row.id);
        }
    };


    function addView(){
        layer.open({
            type: 2,
            title: '添加新用户',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:0,
            area: ['750px', '574px'],
            content: 'add.html',
            end:function () {
                $('#table').bootstrapTable("refresh");
            }
        });
    }

    function editView(id){
        //顶部编辑按钮
        if(id == null || id == ""){
            var rows = $('#table').bootstrapTable("getSelections");
            if(rows == null || rows.length == 0){
                layer.msg("你好像什么也没有选中！");
                return;
            }else{
                if(rows.length > 1){
                    layer.alert("编辑只允许选择一行哦~");
                    return;
                }
            }
            id = rows[0].id;
        }
        if(runtime == "demo" && id == 1){
            layer.msg("演示环境，不允许操作！", {icon:4});
            return;
        }
        layer.open({
            type: 2,
            title: '编辑用户',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:0,
            area: ['750px', '574px'],
            content: 'edit.html?id='+id,
            end:function () {
                $('#table').bootstrapTable("refresh");
            }
        });
    }



    function deleteData(id) {
        if(runtime == "demo"){
            layer.msg("演示环境，不允许操作！", {icon:4});
            return;
        }
        layer.confirm('确定删除吗？亲~', {
            btn: ['确定','再想想'] //按钮
            ,closeBtn:0
        }, function(){
            $.ajax({
                type: "post",
                url: "delete",
                data: {'id':id},
                async:true, // 异步请求
                cache:false, // 设置为 false 将不缓存此页面
                dataType: "json", // 返回对象
                contentType:"application/json;charset=UTF-8",
                success: function(res) {
                    console.log("res.code=="+res.code);
                    console.log("res=="+JSON.stringify(res));
                    if (res.code == "0") {
                        layer.msg('删除成功！', {icon: 1});
                        $('#table').bootstrapTable("refresh");
                    }else {
                        layer.alert("["+res.code+"]"+res.msg, {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                        });
                    }
                },
                error: function(e) {
                    // 请求失败函数
                    console.log("error:"+JSON.stringify(e));
                    layer.msg("操作失败，请检查是否有相关操作权限！");
                }
            })
        }, function(){
            return;
        })
    }

    //公共按钮-删除
    function deleteBatch() {
        if(runtime == "demo"){
            layer.msg("演示环境，不允许操作！", {icon:4});
            return;
        }
        var rows = $('#table').bootstrapTable("getSelections");
        var names = "";
        console.log("rows="+JSON.stringify(rows));
        if(rows == null || rows.length == 0){
            layer.msg("你好像什么也没有选中！");
            return;
        }else{
            for(var i = 0; i<rows.length; i++){
                names += rows[i].username + ","
            }
            names = names.substring(0,names.length-1);
        }

        layer.confirm('确定删除['+names+']吗？亲~', {
            btn: ['确定','再想想'] //按钮
        }, function(){
            $.ajax({
                type: "post",
                url: "deleteBatch",
                data:  JSON.stringify(rows),
                async:true, // 异步请求
                cache:false, // 设置为 false 将不缓存此页面
                dataType: "json", // 返回对象
                contentType:"application/json;charset=UTF-8",
                success: function(res) {
                    console.log("res.code=="+res.code);
                    console.log("res=="+JSON.stringify(res));
                    if (res.code == "0") {
                        layer.msg('删除成功！', {icon: 1});
                        $('#table').bootstrapTable("refresh");
                    }else {
                        layer.alert("["+res.code+"]"+res.msg, {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                        });
                    }
                },
                error: function(e) {
                    // 请求失败函数
                    console.log("error:"+JSON.stringify(e));
                    layer.msg("操作失败，请检查是否有相关操作权限！");
                }
            })
        }, function(){
            return;
        })
    }


    function resetPassword(id){
        if(id == null || id == ""){
            var rows = $('#table').bootstrapTable("getSelections");
            if(rows == null || rows.length == 0){
                layer.msg("你好像什么也没有选中！");
                return;
            }else{
                if(rows.length > 1){
                    layer.msg("编辑只允许选择一行哦~");
                    return;
                }
            }
            id = rows[0].id;
        }
        if(runtime == "demo" && id == 1){
            layer.msg("演示环境，不允许操作！", {icon:4});
            return;
        }
        layer.prompt({title: '请输入密码，请勿使用弱密码', formType: 1,closeBtn:0}, function(pass, index){
            let data = {"id":id,"newPass":pass};
            $.ajax({
                type: "post",
                url: "resetPassword",
                data:  JSON.stringify(data),
                async:true, // 异步请求
                cache:false, // 设置为 false 将不缓存此页面
                dataType: "json", // 返回对象
                contentType:"application/json;charset=UTF-8",
                success: function(res) {
                    console.log("res.code=="+res.code);
                    console.log("res=="+JSON.stringify(res));
                    if (res.code == "0") {
                        layer.close(index);
                        layer.msg('修改成功！<br>新密码为：'+ pass +'<br>请通知用户重新登录',{icon:1});
                    }else {
                        layer.alert("["+res.code+"]"+res.msg, {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                        });
                    }
                },
                error: function(e) {
                    // 请求失败函数
                    console.log("error:"+JSON.stringify(e));
                    layer.msg("操作失败，请检查是否有相关操作权限！");
                }
            })

        });
    }
</script>

</body>
</html>
